<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标签用户</title>
<link rel="stylesheet" type="text/css" href="krajee/css/select-addl.min.css" />
<link rel="stylesheet" type="text/css" href="krajee/css/select-krajee.min.css" />
<link rel="stylesheet" type="text/css" href="krajee/css/select.min.css" />
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="krajee/js/select2.full.min.js"></script>
<script type="text/javascript" src="krajee/js/select2-krajee.min.js"></script>
<script type="text/javascript" src="js/base64/base64.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
var tags_array = null;

var s2options_c4acac00 = {"themeCss":".select2-container--krajee","sizeCss":"","doReset":true,"doToggle":true,"doOrder":false};
window.select2_5eaa6d36 = {"theme":"krajee","width":"100%","placeholder":"请选择标签","language":"zh-CN"};


function ajax(msg) {
	var event = document.createEvent('MessageEvent');
	var origin = window.location.protocol + '//' + window.location.host;
	event.initMessageEvent('MessageReceived', true, true, msg, origin, 1234, window, null);
	document.dispatchEvent(event);
}
// 全局接收消息事件
function messageReceived(res) {
	res = Base64.decode(res);
	res = JSON.parse(res);

	//标签搜索
	if (res.type == "Search/Tags") {
		SearchTags(res.data);
	}
	if (res.type == "Tags/List") {
		tags_array = res.data;
		TagsList(res.data);
	}

}

function TagsList(data)
{
	if (data.length != 0) {
		var html = '';
		var result_count = 0;


		for (var i in data) {
			var item = data[i];
			 html += '<option value="' + item['name'] + '">' + item['name'] + '</option>';
		}

		$("#w1").html(html);
	}
	else
	{

	}
}

function SearchTags(data)
{
	if (data.length != 0) {
		var html = '';
		var result_count = 0;

		for (var i in data) {
			var item = data[i];
			var tags = tagsicno(item['tags']);
			var unread = item["unread"] > 0 ? '<em style="padding-left:10px; color:#FF0000; font-size:12px; font-style:normal">(未读:' +  item["unread"] + ')</em>' : "";
    		html += '<tr expand_sotf_type="tags" usernick="'+ item['usernick'] +'" heardpic="'+ item['heardpic'] +'" wxid="'+ item['wxid'] +'" content="测试">';
      		html += '<td><div><img src="'+ item['heardpic'] +'" height="45" width="45" /><span style="position:absolute;left:68px ; top:10px ">'+ item['usernick'] + unread +'</span><span style="position:absolute;left:68px ; top:35px ">'+ tags +'</span></div></td>';
    		html += '</tr>';
    		result_count++;
		}
		$("#result").html(html);
		$("#result_count").html(result_count);
	}
	else
	{
		$("#result").html('<tr><td style="text-align: center; color: #C0C0C0; font-size: 12px;">没有找到内容，换一个标签试试</td></tr>');
		$("#result_count").html("0");
	}
}

function tagsicno(tags)
{
	if(tags == null) return "";

	var iconHtml = "";
	var arr = tags.split(',');
	for (var index in arr){
		if(arr[index].length == 0) continue;
		var tagsname = arr[index];
		if(tags_array[tagsname])
		{
			iconHtml += '<img width="12" height="12" src="' + tags_array[tagsname].icon + '" />';
		}
		
	}

	return iconHtml;
}

</script>
<style type="text/css">
body{ padding: 10px; }
</style>
</head>
<body>
<div class="form-group field-data-category_id">
<div class="form-group field-data-category_id">
<span id="parent-s2-togall-w1" style="display:none">
<span id="s2-togall-w1" class="s2-togall-button s2-togall-select">
<span class="s2-select-label"><i class="glyphicon glyphicon-unchecked"></i>选中全部</span>
<span class="s2-unselect-label">
<i class="glyphicon glyphicon-check"></i>取消全部
</span>
</span>
</span>
<div class="kv-plugin-loading loading-w1">&nbsp;</div>
<select id="w1" class="form-control" name="category_id[]" multiple size="4" placeholder="请选择多个分类" data-s2-options="s2options_c4acac00" data-krajee-select2="select2_5eaa6d36" style="display:none">
</select>
</div>
</div>
<div style="clear: both; padding-top: 10px; padding-bottom: 10px;"><button id="Btn" class="layui-btn layui-btn-fluid">搜索</button></div>


<table class="layui-table">
  <thead>
    <tr>
      <th>搜索结果：<span id="result_count">0</span></th>
    </tr> 
  </thead>
  <tbody id="result">
  	<tr>
      <td style="text-align: center; color: #C8C8C8; font-size: 12px;">请选择一个标签进行搜索</td>
    </tr>
  </tbody>
</table>

</body>

<script>
		if (jQuery('#w1').data('select2')) { jQuery('#w1').select2('destroy'); }
		jQuery.when(jQuery('#w1').select2(select2_5eaa6d36)).done(initS2Loading('w1','s2options_c4acac00'));
		
		/*获取选中的id值*/
		$("#Btn").click(function(){
			var val = $("#w1").val();
			var data_opt = {
				type: "Search/Tags",
				data: {
					data: val,
				}
			}
			$("#result").html('<tr><td style="text-align: center; color: #C0C0C0; font-size: 12px;">开始加载数据...</td></tr>');
			$("#result_count").html("0");

			data_opt = JSON.stringify(data_opt);
			ajax(data_opt);
		});
	</script>
</html>
